import React, { Component } from 'react'
import { Tabs, Toast } from 'antd-mobile';
import Lists from './list'
import axios from '../utils/http'
import "../assets/style/periphery.less"
const { BMap } = window;
export default class Periphery extends Component {
    constructor(props) {
        super(props)
        const address = this.props.address
        this.state = {
            poi: {},
            title: '公交',
            address: address,
            store: [],
        }
    }
    request = async () => {
        const resdata = await axios({
            url: '/getNew/house',
            method: 'post',
        })
        console.log(resdata.data);
        if (resdata.data.code === "200") {
            let resArray = JSON.parse(JSON.stringify(this.state.store))
            resdata.data.data.forEach(item => {
                resArray.push(item)
            })
            this.setState({
                store: resArray
            })
        } else {
            Toast.fail(resdata.data.msg);
        }
    }

    componentDidMount() {
        this.request()
        this.showMap()
    }

    showMap = () => {
        //获取地图节点
        this.map = new BMap.Map("allmap");
        this.localSearch = new BMap.LocalSearch(this.map);
        //要查询的地址
        this.localSearch.search(this.state.address);
        //查询后的回调函数
        this.localSearch.setSearchCompleteCallback((searchResult) => {
            //获取当前的经纬度
            var poi = searchResult.getPoi(0);
            //创建地图
            this.map.centerAndZoom(poi.point, 16);
            //开启缩放
            this.map.addControl(new BMap.NavigationControl({ offset: new BMap.Size(20, 20) }));
            //添加标点
            this.local = new BMap.LocalSearch(this.map, {
                renderOptions: { map: this.map }
            });
            //初始化默认搜索公交
            this.local.searchInBounds(this.state.title, this.map.getBounds());
        });
    }

    onTabClick = (tab) => {
        console.log(tab, 123);
        //清除原在地图的标记
        this.map.clearOverlays();
        //  根据不同标签获取周边
        this.local.searchInBounds(tab.title, this.map.getBounds());
    }

    render() {
        const tabs = [
            { title: '公交' },
            { title: '教育' },
            { title: '医疗' },
            { title: '购物' },
            { title: '生活' },
            { title: '娱乐' },
        ];
        return (
            <div className="BMap">
                <h2>位置周边</h2>
                <Tabs tabs={tabs}
                    tabBarUnderlineStyle={{ display: "none" }}
                    tabBarActiveTextColor={"#27b927"}
                    onTabClick={this.onTabClick}
                ></Tabs>
                <div id='allmap'></div>
                <h2>猜你喜欢</h2>
                {
                    this.state.store.length ? this.state.store.map((item, index) => {
                        return <Lists href="/newHousedetail" data={item} key={index}></Lists>
                    }) : ''
                }
            </div>
        )
    }
}
